<template>
	<div style="padding:0px;">
		<el-form :inline="true"  ref=""   label-width="96px">
			<el-form-item label="订单号"  >
			    <el-input v-model="sum.orderNumber" disabled></el-input >
			</el-form-item>
            <el-form-item label="垫资金额"  >
			    <el-input :value="sum.paymentAmount | toFixed2 " disabled></el-input >
			</el-form-item>
			<el-form-item label="垫资周期"  >
			    <el-input v-model="sum.maximum" disabled></el-input >
			</el-form-item>
			<el-form-item label="打款日期"  >
			    <el-input :value="sum.orderRemitStartTime| parseTime " disabled></el-input >
			</el-form-item>
			<el-form-item label="服务费比率"  >
			    <el-input :value="(sum.interestRate-0).toFixed(4)" disabled></el-input >
			</el-form-item>
			 <el-form-item label="服务费2比率"  >
			    <el-input :value="((sum.overInterestRate-0)*10).toFixed(4)" disabled></el-input >
			</el-form-item>
		</el-form>
		<el-table :data="dialogTableData.data" border  >
		    
		    </el-table-column>
		    <el-table-column label="产生服务费日期" width="180">
		      <template scope="scope">
		        <span >{{ scope.row.createDate | parseTime('{y}-{m}-{d}')}}</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="当天归还本金"  width="130">
		      <template scope="scope">
		        <span >{{ (scope.row.returnCapital  ||0 )|toFixed2}}</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="当天归还利息"  width="130">
		      <template scope="scope">
		        <span >{{ (scope.row.returnInterest ||0 )|toFixed2 }}</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="当天归还逾期费"  width="140">
		      <template scope="scope">
		        <span >{{ (scope.row.returnExceed ||0 )|toFixed2 }}</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="待还本金"  >
		      <template scope="scope">
		        <span >{{ (scope.row.overplusCapital ||0 )|toFixed2 }}</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="服务费"  >
		      <template scope="scope">
		        <span >{{ (scope.row.interest ||0 )|toFixed2 }}</span>
		      </template>
		    </el-table-column>		   
		    <el-table-column label="服务费2" >
		      <template scope="scope">
		        <span >{{ (scope.row.exceed ||0 )|toFixed2 }}</span>
		      </template>
		    </el-table-column>
		    
		</el-table>
		<div>	
            <p class="el-alert el-alert--success">{{'总计归还本金：(大写) '  }} <span>{{sum.returnCapital|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(sum.returnCapital||0)|toFixed2}}</span></span></p>
		</div>
		<div class="total">
			
			<p style="margin-right:1%;" class="el-alert el-alert--warning ">{{'总计归还利息(大写) '  }} <span>{{sum.returnInterest|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(sum.returnInterest||0)|toFixed2}}</span></span></p>
			<p style="width:49%;" class="el-alert el-alert--warning ">{{'总计归还逾期费：(大写) '  }} <span>{{sum.returnExceed|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(sum.returnExceed||0)|toFixed2}}</span></span></p>
		</div>
		<div style="display:flex;" class="total">
			
			<p style="margin-right:1%;" class="el-alert el-alert--success">{{'总计服务费(大写) '  }} <span>{{sum.interest|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(sum.interest||0)|toFixed2}}</span></span></p>
			<p style="flex:1;width:49%;" class="el-alert el-alert--success">{{'总计服务费2(大写) '  }} <span>{{sum.exceed|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{(sum.exceed||0)|toFixed2}}</span></span></p>
		</div>
		<div style="text-align:center;margin-top:10px;">
			<pagination   :tableData="dialogTableData" :searchForm="searchForm" v-on:refreshSeachData="seachData"></pagination>
		</div>
		
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
		</div>
	</div>
</template>
<style scoped lang="stylus" rel="styleheet/stylus">
    .total{display:flex!important;
        p{flex:1;width:50%;margin-right:1%;}
    }
</style>
<script>
    import agentHttp from '@/utils/agentHttp.js';
    import pagination from '@/views/pagination'  //分页组件
	export default{
		components:{pagination},
		created(){		
	      	this.selectData();
	      	this.getSum();
        },
		props:['dialogSendData','tableData'],
		data(){
			return{
				searchForm:{},
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogTableData:[{		        	
		        }],
		        sum:''
			}
		},methods:{
			seachData(){
				var params=this.searchForm||{};
			    params.page=this.dialogTableData.page||1;
			    params.rows=this.dialogTableData.rows||10;
			    agentHttp.get('adminApi/admin/accounts_receivable_report/select_detail/'+this.dialogSendData.id+'?page='+params.page+'&rows='+params.rows).then((data)=>{	
		            this.dialogTableData=data;		             
		        }) 
			},
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	
		          	if(this.dialogSendData.id===""){
		          		//添加
		          	    this.addData();
		          	}else{
		          		//修改
		          		this.editData();
		          	}
		           
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
			},
		    selectData(){
		    	agentHttp.get('adminApi/admin/accounts_receivable_report/select_detail/'+this.dialogSendData.id).then((data)=>{	
		            this.dialogTableData=data;		             
		        }) 
		    },
		    getSum(){
		    	agentHttp.get('adminApi/admin/accounts_receivable_report/get_sum/'+this.dialogSendData.id).then((data)=>{	
		            if (data.success) {
		            	this.sum=data.data;
		            }		            		             
		        }) 
		    },
		}
	}
</script>